<template>
  <!--
      作者：luoyiming
      时间：2019-10-25
      描述：售后管理-售后详情
  -->
  <div class="user pb50" v-loading="loading">
    <div class="product-content">
      <!--售后单信息-->
      <div class="common-form">售后单信息</div>
      <div class="refund-detail-content">
        <el-row>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">订单号：</span>
              <span class="gray9" style="color: blue; cursor: pointer;" @click="addClick(order.order_id)">{{ order.order_no }}</span>
            </div>
          </el-col>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">买家Id：</span>
              {{ order.user_id }}
            </div>
          </el-col>
          <!--          <el-col :span="5">-->
          <!--            <div class="pb16">-->
          <!--              <span class="gray9">售后类型：</span>-->
          <!--              {{ detail.type.text }}-->
          <!--            </div>-->
          <!--          </el-col>-->
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">售后类型：</span>
              <!-- <template v-if="order.refund_type == 30">仅退款</template>
              <template v-if="order.refund_type == 10">退货退款</template> -->

              <el-select v-model="form.refund_type" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>

          </el-col>

          
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">处理状态：</span>
              <!-- <template><span>{{order.order_refund_text}}</span></template> -->
             <template v-if="order.is_order_refund == 1">申请中</template>
              <template v-if="order.is_order_refund == 2">已通过</template>
              <template v-if="order.is_order_refund == 3">已拒绝</template> 
            </div>
          </el-col>

        </el-row>
          <el-row>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">处理时间：</span>
              {{ order.refund_audit_time }}
            </div>
          </el-col>
         
        </el-row>
      </div>
      <!--售后商品信息-->
      <div class="common-form">售后商品信息</div>
      <div class="refund-detail-content" v-for="item in order.product">
        <el-row>
          <el-col :span="5">
            <div class="pb16"><span class="gray9">商品编码：{{ item.order_product_id }}</span></div>
          </el-col>
          <el-col :span="19">
            <div class="pb16">
              <span class="gray9">商品名称：</span>
              {{ item.product_name }}
            </div>
          </el-col>
          <!--          <el-col :span="5">-->
          <!--            <div class="pb16">-->
          <!--              <span class="gray9">重量(Kg)：</span>-->
          <!--              {{ detail.orderproduct.product_weight }}-->
          <!--            </div>-->
          <!--          </el-col>-->
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">单价：</span>
              {{ item.product_price }}
            </div>
          </el-col>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">购买数量：</span>
              {{ item.total_num }}
            </div>
          </el-col>
          <!--          <el-col :span="5" v-if="order.order_source==70">-->
          <!--            <div class="pb16">-->
          <!--              <span class="red" v-if="order.advance.money_return==1">定金(可退)：</span>-->
          <!--              <span class="gray9" v-else>定金(不可退)：</span>-->
          <!--              {{ order.advance.pay_price }}-->
          <!--            </div>-->
          <!--          </el-col>-->
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">付款价：</span>
              {{ item.total_pay_price }}
            </div>
          </el-col>
        </el-row>
      </div>

      <!--用户申请原因-->
      <div class="apply-reason-box">
        <div class="common-form">用户申请原因</div>
        <div class="apply-reason" v-if="order.orderRefund">{{ order.orderRefund[0].apply_desc }}</div>
        <div class="d-s-s mt10" v-if="order.orderRefund > 0 && order.orderRefund[0]['image'].length > 0">
          <div class="pic" v-for="(item, index) in order.orderRefund[0]['image']" :key="index" v-viewer><img
            v-img-url="item.file_path" alt=""
            width="60"/></div>
        </div>
      </div>

      <!--商家审核-->
      <div v-if="order.is_order_refund == 1" v-auth="'/order/refund/audit'">
        <div class="common-form mt16">商家审核</div>
        <el-form size="small" ref="form" :model="form" label-width="80px">
          <!--          <el-form-item label="售后类型">-->
          <!--            <span class="orange">{{ detail.type.text }}</span>-->
          <!--          </el-form-item>-->
          <el-form-item label="审核状态">
            <el-radio-group v-model="form.is_agree">
              <el-radio :label="10">同意</el-radio>
              <el-radio :label="20">拒绝</el-radio>
            </el-radio-group>

            
          </el-form-item>

          
          
          <!--          <el-form-item label="退货地址" v-if="form.is_agree == 10 && detail.type.value != 30">-->
          <!--            <el-select v-model="form.address_id" placeholder="请选择地址">-->
          <!--              <el-option v-for="(item, index) in address" :key="index" :label="item.detail" :value="item.address_id">-->
          <!--              </el-option>-->
          <!--            </el-select>-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="退款金额" v-if="form.is_agree == 10 && detail.type.value == 30">-->
          <!--            <el-input v-model="form.refund_money"></el-input>-->
          <!--            <p>请输入退款金额，最多{{ detail.orderproduct.max_refund_money }} 元。注：该操作将执行订单原路退款 并关闭当前售后单，请确认并填写退款的金额（不能大于订单实付款）</p>-->
          <!--          </el-form-item>-->
          <el-form-item label="拒绝原因" v-if="form.is_agree == 20">
            <el-input type="textarea" v-model="form.order_refund_content" class="max-w460"></el-input>
          </el-form-item>
          
        </el-form>
      </div>

      <div v-if="order.is_order_refund >= 2">
        <div class="common-form mt16">商家审核</div>
        <div class="refund-detail-content">
          <el-row>
            <el-col :span="5">
              <div class="pb16">
                <span class="gray9">审核意见：</span>
                <span class="orange" v-if="order.is_order_refund == 2">已同意</span>
                <span class="blue" v-if="order.is_order_refund == 3">已拒绝</span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="5">
              <div class="pb16" v-if="order.is_order_refund == 3">
                <span class="gray9">拒绝原因：</span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <div class="pb16" v-if="order.is_order_refund == 3">
              <div class="apply-reason">{{ order.order_refund_content }}</div>
            </div>
          </el-row>
        </div>
      </div>
      <el-form ref="form" :model="form" v-if="order.is_order_refund == 3" >
          <el-form-item label="售后凭证">
            <div>
              <el-button type="primary" @click="openUpload">上传图片</el-button>
              <img :src="path" class="mt10" width="120px;" v-if="isImg" :isImg="isImg" />

              <Upload v-if="isupload" :isupload="isupload" @returnImgs="returnImgsFunc">上传图片</Upload>
            </div>
          </el-form-item>
      </el-form>

      <el-form ref="form" :model="form" v-if="order.refund_images" >
          <el-form-item label="售后凭证">
            <div >
              <img style="cursor: pointer;" @click="imgShow(order.refund_images)"  :src="order.refund_images" class="mt10" width="120px;" />
             
            </div>
          </el-form-item>
      </el-form>

      <!-- 退货地址 -->
      <div v-if="detail.is_agree.value == 10&&detail.type.value != 30">
        <div class="common-form mt16">退货地址</div>
        <el-row>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">收货人：</span>
              {{ detail.address.name }}
            </div>
          </el-col>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">收货电话：</span>
              {{ detail.address.phone }}
            </div>
          </el-col>
          <el-col :span="14">
            <div class="pb16">
              <span class="gray9">收货地址：</span>
              {{ detail.address.detail }}
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 商家拒绝原因 -->
      <div v-if="detail.is_agree.value == 20">
        <div class="common-form">商家拒绝原因</div>
        <div class="apply-reason">{{ detail.refuse_desc }}</div>
      </div>

      <!-- 用户发货信息 -->
      <div v-if="detail.type.value != 30 && detail.is_agree.value == 10 && detail.is_user_send == 1">
        <div class="common-form mt16">用户发货信息</div>
        <el-row>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">物流公司：</span>
              {{ detail.express.express_name }}
            </div>
          </el-col>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">物流单号：</span>
              {{ detail.express_no }}
            </div>
          </el-col>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">用户发货状态：</span>
              已发货
            </div>
          </el-col>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">发货时间：</span>
              {{ detail.send_time }}
            </div>
          </el-col>
          <el-col :span="4">
            <div class="pb16">
              <span class="gray9">商家收货状态：</span>
              <template v-if="detail.is_receipt == 1">
                已收货
              </template>
              <template v-else="">
                待收货
              </template>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 确认收货并退款 -->
      <div
        v-if="detail.type.value == 10 && detail.is_agree.value == 10 && detail.is_user_send == 1 && detail.is_receipt == 0">
        <div class="common-form mt16">确认收货并退款</div>
        <el-form size="small" ref="money" :model="money" label-width="80px">
          <p>注：该操作将执行订单原路退款 并关闭当前售后单，请确认并填写退款的金额（不能大于订单实付款）</p>
          <el-form-item label="售后类型">
            <span class="orange">{{ detail.type.text }}</span>
          </el-form-item>
          <el-form-item label="退款金额">
            <el-input v-model="money.refund_money"></el-input>
            <p>请输入退款金额，最多{{ detail.orderproduct.max_refund_money }} 元</p>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div v-if="detail.type.value == 20&&detail.is_agree.value == 10 && detail.is_user_send == 1">
      <!-- 去发货 -->
      <div v-if="detail.is_plate_send==0">
        <div class="common-form mt16">发货</div>
        <el-form size="small" ref="deliver" :model="deliver" label-width="100px">
          <el-form-item label="物流公司">
            <el-select v-model="deliver.send_express_id" placeholder="请选择快递公司">
              <el-option :label="item.express_name" v-for="(item, index) in expressList" :key="index"
                         :value="item.express_id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="物流单号">
            <el-input v-model="deliver.send_express_no" class="max-w460"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div v-if="detail.is_plate_send==1">
        <div class="common-form mt16">平台发货信息</div>
        <el-row>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">物流公司：</span>
              {{ detail.sendexpress.express_name }}
            </div>
          </el-col>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">物流单号：</span>
              {{ detail.send_express_no }}
            </div>
          </el-col>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">发货时间：</span>
              {{ detail.deliver_time }}
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!--    <div class="common-form">商家审核</div>-->
    <!--    <div class="refund-detail-content">-->
    <!--      <el-row>-->
    <!--        <el-col :span="5">-->
    <!--          <div class="pb16">-->
    <!--            <span class="gray9">审核状态：</span>-->
    <!--            {{ detail.status.text }}-->
    <!--          </div>-->
    <!--        </el-col>-->
    <!--        <el-col :span="5" v-if="detail.is_agree.value==10&&detail.refund_money>0">-->
    <!--          <div class="pb16">-->
    <!--            <span class="gray9">退款金额：</span>-->
    <!--            {{ detail.refund_money }}-->
    <!--          </div>-->
    <!--        </el-col>-->
    <!--      </el-row>-->
    <!--    </div>-->

    

    <div class="common-button-wrapper">
      <el-button size="small" type="info" @click="cancelFunc">取消 / 返回上一页</el-button>
      <template v-if="order.is_order_refund == 1">
        <el-button size="small" type="primary" @click="onSubmit(detail.order_refund_id)" v-auth="'/order/refund/audit'">确认审核</el-button>
       
      </template>
      <template v-if="order.is_order_refund == 3">
        <el-button  @click="onSubmit(detail.order_refund_id)" type="primary"  size="small">确认退款
                </el-button>
       
      </template>
      
      <!--商家审核-->
      <!--      <template v-if="order.is_order_refund == 1">-->
      <!--        <el-button size="small" type="primary" @click="onSubmit(detail.order_refund_id)">确认审核</el-button>-->
      <!--      </template>-->
      <!--      <template-->
      <!--        v-if="detail.type.value != 30 && detail.is_agree.value == 10 && detail.is_user_send == 1 && detail.is_receipt == 0">-->
      <!--        <el-button size="small" type="primary" @click="refundMoney(detail.order_refund_id)">确认审核</el-button>-->
      <!--      </template>-->
    </div>


    <order-detail :show-detail.sync="showDetail" :order_id="order_id"></order-detail>
  </div>
</template>
<script>
import Upload from '@/components/file/Upload';
import OrderApi from '@/api/order.js';
import OrderDetail from "./dialog/OrderDetail.vue";

export default {
  components: {
    OrderDetail,
     /*图片上传*/
     Upload: Upload,
  },
  data() {
    return {
      tableData: {},
        /*是否上传图片*/
        isupload: false,
        is_linkset: false,
        isImg: false,
        path: '',
        refund_images:'',
        tips_Id:'',
      /*退货详情*/
      detail: {
       
        is_agree: {},
        type: {},
        status: {},
        order_master: {},
        user: {},
        orderproduct: {},
        express: {},
        address: {},
        image: [],
        sendexpress: {},
      },

      options: [{
          value: 10,
          label: '退货退款'
        }, {
          value: 30,
          label: '仅退款'
        }],
      /*订单详情*/
      order: {},
      /*退货地址列表*/
      address: {},
      form: {
        is_agree: 10,
        address_id: '',
        refuse_desc: '',
        refund_money: 0,
        refund_type:'',
        refund_images:''
      },
      money: {
        refund_money: 0
      },
      order_refund_id: 0,
      loading: true,
      order_id: 0,
      showDetail:false
    };
  },
  created() {
    /*获取列表*/
    this.getData();
  },
  methods: {
    imgShow(imageUrl) {
      const image = new Image()

      image.src = imageUrl
      image.onload = () => {
        //创建弹出层
        const previewContatiner = document.createElement('div')
        previewContatiner.style.position = 'fixed'
        previewContatiner.style.top = 0
        previewContatiner.style.bottom = 0
        previewContatiner.style.left = 0
        previewContatiner.style.right = 0
        previewContatiner.style.zIndex = 9999
        previewContatiner.style.backgroundColor = 'rgba(0,0,0,0.8)'
        previewContatiner.style.display = 'flex'
        previewContatiner.style.justifyContent = 'center'
        previewContatiner.style.alignItems = 'center'
        document.body.appendChild(previewContatiner)
        //在弹出层增加图片
        const previewImage = document.createElement('img')
        previewImage.src = imageUrl
        previewImage.style.maxWidth = '80%'
        previewImage.style.maxHeight = '80%'
        previewImage.style.zIndex = 9999
        previewContatiner.appendChild(previewImage)
        //点击弹出层，关闭预览
        previewContatiner.addEventListener('click', () => {
          document.body.removeChild(previewContatiner)
        })
      }
      image.onerror = function () {
        console.log('图片加载失败')
      }
    },

     /*上传*/
     openUpload() {
      this.isupload = true;
    },

    /*获取图片*/
    returnImgsFunc(e) {
      let self = this;
      if (e != null) {
        this.form.refund_images = e[0].file_path;
        this.path = e[0].file_path;
        this.isImg = true;
      }
      this.isupload = false;
    },

    addClick(order_id) {
      this.order_id = order_id;
      this.showDetail = true;
    },

    /*获取列表*/

    getData() {
      let self = this;
      let order_id = this.$route.query.order_id;
      OrderApi.refundDetail({
          order_id: order_id
        },
        true
      )
        .then(res => {
          self.order = res.data.detail;
          self.form.refund_type = self.order.refund_type
          self.address = res.data.address;
          self.expressList = res.data.expressList;
          self.loading = false;
        })
        .catch(error => {
        });
    },

    /*跳转订单详情*/
    gotoPage(row) {
      let self = this;
      this.$router.push({
        path: '/order/order/detail',
        query: {
          order_id: row.order_id
        }
      });
    },

    /*审核*/
    onSubmit(e) {
      let self = this;
      let form = self.form;
      let order_refund_id = e;
      OrderApi.Approval({
          order_id: self.order.order_id,
          is_agree: form.is_agree,
          address_id: form.address_id,
          refuse_desc: form.refuse_desc,
          order_refund_id: order_refund_id,
          refund_money: form.refund_money,
          order_refund_content: form.order_refund_content,
          refund_type:form.refund_type,
          refund_images:form.refund_images,
        },
        true
      )
        .then(data => {
          self.$message({
            message: '恭喜你，操作成功',
            type: 'success'
          });
          this.getData();
        })
        .catch(error => {
        });
    },

    /*确认收货退款*/
    refundMoney(e) {
      let self = this;
      let form = self.money;
      OrderApi.receipt({
          refund_money: form.refund_money,
          order_refund_id: e
        },
        true
      )
        .then(data => {
          self.$message({
            message: '恭喜你，操作成功',
            type: 'success'
          });
          this.getData();
        })
        .catch(error => {
        });
    },

    /*取消*/
    cancelFunc() {
      this.$router.back(-1);
    }
  }
};
</script>
<style>
.apply-reason {
  padding: 16px;
  background: #fff4f4;
  border: 1px solid #f6e6e6;
}

.apply-reason-box .pic {
  width: 100px;
  height: 100px;
  margin-right: 4px;
  border: 1px solid #d1d5dd;
}

.apply-reason-box .pic img {
  width: 98px;
  height: 98px;
  object-fit: contain;
}
</style>
